<template>
  <view class="delivery">
    <view class="delivery-state flex align-center justify-around ">

      <view class="state-item " :class="{'active':current === -1}" @click="sectionChange(-1)">全部</view>
      <view class="state-item " :class="{'active':current === 0}" @click="sectionChange(0)">待支付</view>
      <view class="state-item " :class="{'active':current === 1}" @click="sectionChange(1)">已支付</view>
    </view>
    <view class="order-item" v-for="(item,index) in orderList" :key="item.oid">
      <view class="text-xl margin-bottom-sm"><text class="text-bold">[数据分析]</text> {{ item.des }}</view>
      <view class="text-df  margin-bottom-sm">订单号：{{item.oid}}</view>
      <view class="text-df  margin-bottom-sm">下单日期：{{item.createtime}}</view>
      <view class="flex align-center">

        <view class="btn-group active2"  @click="toPages('/pages/order/order?oid=' + item.oid)"
              v-if="item.status === 0"
        >去付款</view>
        <view class="btn-group active2"  @click="toPages('/pages/report/report?oid=' + item.oid)"
              v-if="item.status === 1"
        >查看报告</view>
      </view>
    </view>

    <view class="padding">
      <u-empty
          v-if="noData"
          mode="data"
          icon="http://cdn.uviewui.com/uview/empty/data.png"
          text="暂无数据"
      >
      </u-empty>
      <u-loading-icon text="加载中" textSize="14" v-if="isMore"></u-loading-icon>
      <view class="flex align-center justify-center text-gray text-df"
            v-if="this.orderList.length === total && total >0">
        已加载全部内容
      </view>
    </view>
  </view>
</template>

<script>
import { toPage} from "@/tools";

import {myOrderList} from "@/api/index";

export default {
  data() {
    return {
      list: ['全部订单','待支付', '已支付'],
      current: -1,
      page: 1,
      limit: 10,
      total: 0,
      orderList: [],
      isMore: true,
      noData: false,
    }
  },
  onLoad() {

  },
  onShow() {
    this.page = 1
    this.getOrderInfo()
  },
  onReachBottom() {
    if (!this.isMore) return;
    this.page++;
    this.getOrderInfo();
  },
  methods: {
    //    切换状态
    sectionChange(num) {
      this.current = num
      this.page = 1
      this.getOrderInfo()
    },
    //  获取订单列表
    async getOrderInfo() {
      const res = await myOrderList({
        status:this.current ,
        page:this.page,
        limit: this.limit
      })
      uni.stopPullDownRefresh()

      this.page === 1 ? (this.orderList = res.data) : (this.orderList = [...this.orderList, ...res.data]);
      this.total = res.total_number;
      this.noData = res.total_number === 0;
      if (this.orderList.length < res.total_number) {
        this.isMore = true
      } else {
        this.isMore = false
      }
    },



    //  页面跳转
    toPages(url) {
      toPage(url)
    }
  }
}
</script>

<style scoped lang="scss">
.delivery {
  padding-top: 88rpx;

  .delivery-state {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 88rpx;
    background: #fff;
    z-index: 29;
    .state-item{
      display: flex;
      align-items: center;
      justify-content: space-around;

      width: 33.33%;
      height: 88rpx;
      font-size: 32rpx;
      &.active{
        color: #14385f;
        font-weight: bold;
        border-bottom: 4rpx solid #007aff;
      }
    }
  }

  .order-item {
    width: 690rpx;
    margin: 30rpx auto;
    padding: 10rpx 20rpx 20rpx;
    border-radius: 30rpx;
    box-sizing: border-box;
    border: 2rpx solid #fff;
    color: #fff;
    background: #667d96;






    .btn-group {
      width: 100%;
      height: 68rpx;
      //border: 2rpx solid #ccc;
      text-align: center;
      line-height: 64rpx;
      font-size: 28rpx;
      border-radius: 10rpx;
      background: #14385f;

      &.active {
        background: #e4393c;
        color: #fff;
        border: 2rpx solid #e4393c;
      }
    }
  }
}
</style>
